<template>
  <div class="container">
    <el-row class="card_header" type="flex">
      <div class="paper_title">试卷列表</div>
    </el-row>
    <div class="card_container" type="flex">
      <div class="card">
        <el-card class="new_paper_card">
          <div slot="header" class="header">
            <span>新建试卷</span>
          </div>
          <div class="body">
            <el-button class="new_paper_button"
                       icon="el-icon-plus"
                       plain
                       @click="dialogFormVisible = !dialogFormVisible"></el-button>
          </div>
        </el-card>
      </div>
      <div class="card" v-for="(item,index) in tpList" :key="index" :itemIndex="index">
        <paperItem :tp="item" @aSignal="aFun($event)" @deletetp="deleteTpHandel"></paperItem>
      </div>
    </div>
    <!-- <div class="card_footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[10, 20, 30, 40]"
          :pager-count="5"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total">
      </el-pagination>
    </div> -->
    <el-dialog title="新建试卷" :visible.sync="dialogFormVisible" width=25%>
      <el-form ref="form" :model="FormData" label-width="80px">
        <el-form-item label="试卷名称">
          <el-input v-model="FormData.name"></el-input>
        </el-form-item>
        <el-form-item label="试卷介绍">
          <el-input v-model="FormData.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="newtp">立即创建</el-button>
          <el-button @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axiosinstance from "@/util/http"
import paperItem  from "@/view/Home/components/PaperBase/paperItem"


export default {
  name: "Paper",
  computed:{},
  data() {
    return{
      user:null,
      tpList:[],
      // total:10,
      page:1,
      pageSize:20,
      arr:[1,2,3,4],
      formLabelWidth: "100px",
      FormData:{
        name:"",
        description:"",
      },
      dialogFormVisible:false,
    }
  },
  methods:{
    aFun(a, b) {
      console.log(a, b);
    },


    async newtp(){
      let that = this;
      let res = await axiosinstance.post('/paper/createtestpaper',{
        name:this.FormData.name,
        description:this.FormData.description,
        username:this.$store.getters.getuser.username
      }).catch(err => console.error(err))
      if(res.data.status === 0){
        this.$message({
          message:res.data.msg,
          type:'success'
        })
        that.FormData.name = "";
        that.FormData.description = "";
        that.dialogFormVisible = !that.dialogFormVisible;
        await this.refreshtpList();
      }
      else this.$message.error({
        message:res.data.msg
      })
    },
    async refreshtpList(){
      await axiosinstance.get('/paper/testpaperlist',{
        params:{
          page:this.page,
          pageSize:this.pageSize,
          username:this.$store.getters.getuser.username
        }
      }).then(res =>{
        this.tpList = res.data?.data;
        console.log(res.data)
      } )
    },

    deleteTpHandel(tp_id) {
      console.log("del",tp_id);
      for(let i=0;i<this.tpList.length;i++){
        console.log(this.tpList[i].tp_id,tp_id,this.tpList[i].tp_id === tp_id)
        if(this.tpList[i].tp_id === tp_id){
          this.tpList.splice(i,1);
          this.$forceUpdate();
          break;
        }

      }
      //  await axiosinstance.get("/paper/testpaperlist", {
      //   params: {
      //     page: 1,

      //     pageSize: 10,
      //     username:this.$store.getters.getuser.username
      //   }
      // }).then(res =>{
      //   this.$set(this, 'tpList',res.data?.data);

      //   console.log(res.data)
      // } )
    },



    handleSizeChange(e){
      console.log(e)
      this.pageSize = e;
      this.refreshtpList()
    },
    handleCurrentChange(e){
      this.page = e;
      this.refreshtpList()
    },

  },
  components:{
    paperItem
  },
  created(){

    this.user = this.$store.getters.getuser;
    console.log(this.user)
    console.log(this.page,this.pageSize)
    axiosinstance.get('/paper/testpaperlist',{
      params:{
        page:this.page,
        pageSize:this.pageSize,
        username:this.user.username
      }
    }).then(res =>{
      this.tpList = res.data.data;
      // this.total = res.data?.data?.total;
      console.log(res.data)
    } )
  },

}

</script>

<style scoped lang="less">
.container{
  height:100%;
  position:relative;
  background-color: #e5e5e5;
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .card_header{
    font-size:20px;
    font-weight: bold;
    font-color: #123;
    margin: 0 auto;
  }
  .card_container{
    height:100%;
    display:flex;
    flex-wrap: wrap;
    justify-items: center;
    margin: 0 auto;
    padding-left: 180px;
    .card{
      width:20%;
      //height:150px;
      margin:1%;
      .new_paper_card{

        height:100%;
        border:2px solid rgb(255, 255, 255);
        border-radius:35px;
        transition-delay: 0.04s;
        transition-duration:0.7s;
        &:hover{
          transform: translate(0,-5px);
          border-radius:15px;
          transition-delay: 0.13s;
          transition-duration:0.7s;
        }
        .header{
        }
        .body{
          .new_paper_button{
            //background:green;
            margin:0;
            padding:0;
            border: 0px;
            border-radius:50%;
            font-size:80px;
            vertical-align:middle;
            &:hover{

            }
          }
        }
      }
    }
  }
}

.paper_title{
  margin: 20px auto;
}
</style>